<template>
    <div class="banklist">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="list">
                <van-skeleton title :row="3" :loading="loading">
                    <div class="item" v-if="list.length>0">
                        <div class="item">
                            <router-link tag="div" :to="'/center/bankAdd/' + item.id" class="item" v-for="item of list" :key="item.id">
                                <h3>
                                {{ item.bank }}
                                <span>{{ item.address }}</span>
                                </h3>
                                <h2>{{ item.number }}</h2>
                            </router-link>
                        </div>
                        <div class="btn">
                            <van-button type="danger" size="large" @click="bankAdd">添加银行卡</van-button>
                        </div>
                    </div>
                    <van-empty description="当前没有绑定银行卡" v-else>
                        <van-button round type="danger" class="bottom-button" @click="bankAdd">
                            添加银行卡
                        </van-button>
                    </van-empty>
                </van-skeleton>
            </div>
        </van-pull-refresh>
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            isLoading:false,
            loading:true,
            list:[]
        }
    },
    computed: {
        ...mapState(['openid'])
    },
    mounted(){
        this._getList()
    },
    methods:{
        //添加银行卡
        bankAdd(){
            this.$router.push({ path: `/center/bankAdd/none` })
        },
        //下拉刷新
        onRefresh(){
            this._getList()
            this.isLoading = false
        },
        //获取列表
        async _getList() {
            this.loading = true
            let { data: { code, data } } = await this.$http.get(this.$api.bankShow,{
                openid: this.openid
            })
            this.loading = false
            if (code === 0) {
                this.list = data.items
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .banklist{
        .list{
            height: calc(100vh - 50px);
            .van-skeleton__title{
                margin-top: 2rem;
            }
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
            }
            .item {
                .btn{
                    margin: 0 1rem;
                }
                .item{
                    .item{
                        margin: 0rem 1rem 1rem;
                        padding: 2rem;
                        background: #fff;
                        border-radius: 5px;
                        box-shadow: 0 2px 2px 0px #7a7a7a;
                        h3 {
                            font-size: 16px;
                            margin-bottom: 1;
                        span {
                            font-size: 14px;
                        }
                        }
                        h2 {
                            font-size: 18px;
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
</style>
